<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>文章列表</title>

    <meta name="description" content="Dynamic tables and grids using jqGrid plugin"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- basic styles -->

    <link href="../static/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../static/assets/css/font-awesome.min.css"/>

    <!--[if IE 7]>
    <link rel="stylesheet" href="../static/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->

    <!-- page specific plugin styles -->

    <link rel="stylesheet" href="../static/assets/css/jquery-ui-1.10.3.full.min.css"/>
    <link rel="stylesheet" href="../static/assets/css/datepicker.css"/>
    <link rel="stylesheet" href="../static/assets/css/ui.jqgrid.css"/>

    <!-- fonts -->

    <link rel="stylesheet" href="../static/assets/css/ace-fonts.css"/>

    <!-- ace styles -->

    <link rel="stylesheet" href="../static/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="../static/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="../static/assets/css/ace-skins.min.css"/>

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="../static/assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->

    <script src="../static/assets/js/ace-extra.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="../static/assets/js/html5shiv.js"></script>
    <script src="../static/assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="page-content">
    <div class="page-header">
        <h1>
            文章
            <small>
                <i class="icon-double-angle-right"></i>
                Dynamic tables and grids using jqGrid plugin
            </small>
        </h1>
    </div><!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->

            <table id="grid-table"></table>

            <div id="grid-pager"></div>

            <script type="text/javascript">
                var $path_base = "/";//this will be used in gritter alerts containing images
            </script>

            <!-- PAGE CONTENT ENDS -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</div><!-- /.page-content -->
<!--引入公用footer-->
<div th:include="common/footer :: copy"></div>

<!-- inline scripts related to this page -->
<script type="javascript">
    $(document).ready(function () {
        jQuery("#grid-table").jqGrid({
            url: 's',
            datatype: "json",
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [{name: 'id', index: 'id', width: 55}, {name: 'invdate', index: 'invdate', width: 90}, {
                name: 'name',
                index: 'name asc, invdate',
                width: 100
            }, {name: 'amount', index: 'amount', width: 80, align: "right"}, {
                name: 'tax',
                index: 'tax',
                width: 80,
                align: "right"
            }, {name: 'total', index: 'total', width: 80, align: "right"}, {
                name: 'note',
                index: 'note',
                width: 150,
                sortable: false
            }],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption: "JSON Example"
        });
        jQuery("#list2").jqGrid('navGrid', '#pager2', {edit: false, add: false, del: false});
    })



</script>
</body>
</html>